<template>
  <div class="nav-top">
    <tabs class="tabs" :currentIndex="currentIndex"  @changeCurrentIndex="changeCurrentIndex">
      <tab class="tab" tabName="训练" index="1">
        <Drill/>
      </tab>
      <tab class="tab" tabName="教练" index="2">
        <Coach/>
      </tab>
      <tab class="tab" tabName="课程" index="3">
        <Course/>
      </tab>
      <tab class="tab" tabName="素材" index="4">
        <Metter/>
      </tab>
      <i class="icon iconfont icon-Magnifier magnifier" @click="fitnessSearchHandler"></i>
    </tabs>
      <keep-alive>
    <router-view></router-view>
        
      </keep-alive>
  </div>
</template>
<script>
import Coach from "./subpage/Coach";
import Course from "./subpage/Course";
import Drill from "./subpage/Drill";
import Metter from "./subpage/Metter";

export default {
  name: "TopNav",
  data() {
    return {
      currentIndex: "1"
    };
  },
  components: {
    Coach,
    Course,
    Drill,
    Metter
  },
  beforeMount(){
      this.currentIndex= localStorage.getItem("key")||"1"
  },
  methods: {
    changeCurrentIndex(index) {

        localStorage.setItem("key", index)
        if(localStorage.getItem("key")==1){
            this.currentIndex="1"
        }else if(localStorage.getItem("key")==2){
            this.currentIndex="2"
        }else if(localStorage.getItem("key")==3){
            this.currentIndex="3"
        }else if(localStorage.getItem("key")==4){
            this.currentIndex="4"
        }
      //  this.currentIndex = localStorage.getItem("key")
    },
    fitnessSearchHandler() {

      console.log("搜索");
    }
  }
};
</script>
<style scoped lang="less">
.nav-top {
  .magnifier {
    font-size: 25px;
    padding: 12/20rem 15/20rem 0 0;
    color: #ffffff;
  }
}

.tabs-header {
  display: flex;
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: 2px solid #ffffff;
  position: fixed;
  
  .tab{
    flex:1;
    list-style: none;
    line-height: 2.5rem;
    position: relative;
    text-align:center;
    font-size: 1rem;
    color: #ffffff;
  }
  .tab.active {
  border-bottom: 2px solid yellow;
  color: yellow;
  }
}

</style>